<template>
    <div class="prompt">
        <!-- 认定结果 -->
        <nav>
            <img src="../../assets/img/double-flicker.png" alt="">
        </nav>
        <section>
            <ul>
                <li>请您在确保自身安全的情况下操作</li>
                <li>为了您的安全，请打开车辆双跳灯，车辆后方放置警示牌！夜间打开示廓灯和后尾灯加强安全性</li>
            </ul>
        </section>
        <footer>
            <p style="font-size:.15rem">请注意：虚假报案将承担相应的法律责任</p>
            <div class="btnSec">
                <mu-button @click="submit" class="submit" color="#6794F5" full-width>已确认，下一步</mu-button>
            </div>
        </footer>
    </div>
</template>

<script>
export default {
    name: "prompt",
    data() {
        return {
        }
    },
    methods: {
        submit() {
            this.$alert('请确认已打开手机GPS定位功能，确保警方定位事故现场', '注意事项').then(({ result, value })=>{
                    //点击确定的操作
                        if(result) {
                            this.$router.push("/accidentInfo");
                        };
            });
        }
    },
    created() {
        document.title = '安全提示';
    },
    mounted() {
        
    }
}
</script>

<style lang="scss" scoped>
@import "~assets/css/mixin.scss";
.prompt {
    width: 100%;
    height: 100%;
    overflow: hidden;
    nav {
        img {
            display: block;
            width: rem(150);
            height: rem(150);
            margin: rem(28) auto rem(20);
        }
    }
    section {
        width: 80%;
        margin: rem(40) auto 0;
        color: #8D9093;
        font-size: rem(16);
        ul {
            li {
                position: relative;
                margin-bottom: rem(10);
                line-height: rem(20);
                &::before{
                    position: absolute;
                    top: 6%;
                    left: rem(-20);
                    content: '';
                    width: rem(10);
                    height: rem(10);
                    background-color: #8D9093;
                    border-radius: rem(5);
                }
            }
            li:first-child {
                &::before {
                    top: 20%;
                }
            }   
        }
        // text-align: center;
        // p:first-child {
        //     font-size: rem(20);
        //     color: #555555;
        //     margin-bottom: rem(15);
        // }
        // p:nth-child(2) {
        //     font-size: rem(16);
        //     color: #8D9093;
        // }
        // p:last-child {
        //     font-size: rem(16);
        //     color: #678CDF;
        //     margin-top: rem(8);
        // }
    }
    footer {
        position: absolute;
        bottom: rem(20);
        right: 0;
        left: 0;
        p {
            text-align: center;
            color: #8D9093;
            font-size: rem(12);

        }
        .submit {
            display: block;
            width: 3.45rem;
            height: 0.48rem;
            margin: 0.2rem auto;
            color: #fff;
            font-size: 0.18rem;
        }
    }
}
</style>
